<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>查看接口文件数据</title>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <div>
            <table align="center" border="1" width="600" height="200">
                <caption>天气预报</caption>
                <tr>
                    <td colspan="4"></td>
                </tr>
                <tr>
                    <th>预测日期</th>
                    <th>天气</th>
                    <th>最高温度</th>
                    <th>最低温度</th>
                </tr>
            </table>
        </div>
    </body>
    <script>
        $.get({
            url: 'https://mock.apifox.cn/m1/1893392-0-default/cityweather',
            success: function(obj){
                let forecast = obj.data.forecast;
                let city = obj.data.city;
                let str = "";
                $.each(forecast, function(index,element){
                    str += "<tr><td>" + element['predictDate'] +
                            "</td><td>" + element['conditionDay'] +
                            "</td><td>" + element['tempDay'] + `&#8451;` +
                            "</td><td>" + element['tempNight'] + `&#8451;` +"</td></tr>";
                })
                $("body > div > table > tbody > tr:nth-child(1) > td").text("城市:" + city.counname +
                        city.pname + city.secondaryname + city.name)
                $('table').append(str);
            }
        })
    </script>
</html>